<template>
	<view class="CreateStore">
		<view class="conItem">
			<view class="conItemL">门店名称</view>
			<input type="text" placeholder="请输入门店名称" v-model="name" />
		</view>
		<view class="conItem">
			<view class="conItemL">门店品类</view>
			<picker mode="selector" :range="cateList" range-key="name" @change="choiceCate">
				<view class="conItemTxt">
					<view :style="{'color':cateIndex!=-1?'#333333':'#D0D0D0'}">{{cateIndex!=-1?cateList[cateIndex].name:'请选择'}}</view>
					<image src="../../static/mine/more.png"></image>
				</view>
			</picker>
		</view>
		<view class="conItem">
			<view class="conItemL">所属区域</view>
			<picker mode="multiSelector" :range="addressList" range-key="name" @change="choiceAddress" @columnchange="changeProvince">
				<view class="conItemTxt">
					<view :style="{'color':cityStr?'#333333':'#D0D0D0'}">{{cityStr?cityStr:'请选择'}}</view>
					<image src="../../static/mine/more.png"></image>
				</view>
			</picker>
		</view>
		<view class="conItem">
			<view class="conItemL">所属商圈</view>
			<view class="conItemR" @click="toDistrict">
				<view :style="{'color':district.id?'#333333':'#D0D0D0'}">{{district.name?district.name:"请选择"}}</view>
				<image src="../../static/mine/more.png"></image>
			</view>
		</view>
		<view class="conItem">
			<view class="conItemL">门店地址</view>
			<view class="conItemR" @click="toStoreAddress">
				<view :style="{'color':address?'#333333':'#D0D0D0'}">{{address?address:"请选择"}}</view>
				<image src="../../static/mine/more.png"></image>
			</view>
		</view>
		<view class="imgTit">门店头图</view>
		<view class="imgTip">门店主图必须上传，图片可以是门店logo、门店招牌.</view>
		<view class="imgWrap" @click="choiceImg" v-if="!imageUrl">
			<image src="../../static/mine/photo.png"></image>
		</view>
		<image :src="getImage(imageUrl)" style="width: 112upx;height: 112upx;border-radius: 8upx;" v-if="imageUrl" @click="choiceImg"></image>
		
		<!-- <view class="imgTit">其他证件</view>
		<view class="imgTip">选填，可多选</view>
		<view style="display: flex;flex-wrap: wrap;">
			<view class="imgWrap" @click="choiceImg1">
				<image src="../../static/mine/photo.png"></image>
			</view>
			<view v-for="(item,index) in imageUrlArr" :key="index" class="imgWrapsBox">
				<view class="imgWraps" :style="{'background-image':'url('+getImage(item)+')'}"></view>
				<view style="line-height: 60upx;line-height: 60upx;text-align: center;color: red;font-size: 28upx;" :data-index="index" @click="delImg">删除</view>
			</view>
		</view> -->
		
		
		<view class="submitBtn" @click="sureAdd">确认新增</view>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	const app = getApp();
	export default {
		data() {
			return {
				name:"",
				address:"",
				cateIndex:-1,
				cateList:[],
				addressList:[[],[],[]],
				cityStr:"",
				cityArr:[],
				district:{},
				imageUrl:"",
				area:{},
				latitude:"",
				longitude:"",
				imageUrlArr:[],
				reqFlag:true
			}
		},
		onShow() {
			this.getCateList();
		},
		onLoad() {
			this.getAddress(0);
		},
		methods: {
			delImg(e){
				let index = e.target.dataset.index || e.currentTarget.dataset.index;
				this.imageUrlArr.splice(index,1);
			},
			sureAdd(){
				if(!this.reqFlag){
					return false;
				}
				
				let obj = {};
				if(!this.name.trim()){
					this.$refs.uToast.show({
						title:"请填写门店名称",
						type:"error",
						duration:2000
					})
					return false;
				}
				if(this.cateIndex==-1){
					this.$refs.uToast.show({
						title:"请选择门店品类",
						type:"error",
						duration:2000
					})
					return false;
				}
				if(this.cityArr.length==0){
					this.$refs.uToast.show({
						title:"请选择门店区域",
						type:"error",
						duration:2000
					})
					return false;
				}
				if(!this.district.id){
					this.$refs.uToast.show({
						title:"请选择商圈",
						type:"error",
						duration:2000
					})
					return false;
				}
				if(!this.address){
					this.$refs.uToast.show({
						title:"请选择门店地址",
						type:"error",
						duration:2000
					})
					return false;
				}
				if(!this.imageUrl){
					this.$refs.uToast.show({
						title:"请上传门店头图",
						type:"error",
						duration:2000
					})
					return false;
				}
				// obj.user_id = 1874;
				obj.user_id = uni.getStorageSync("userId");
				// obj.images = 1874;
				obj.industry_id = this.cateList[this.cateIndex].id;
				obj.name = this.name;
				obj.province_id = this.addressList[0][this.cityArr[0]].id;
				obj.city_id = this.addressList[1][this.cityArr[1]].id;
				obj.area_id = this.addressList[2][this.cityArr[2]].id;
				obj.business_areas_id = this.district.id;
				obj.dimension = this.latitude;
				obj.longitude = this.longitude;
				// obj.longitude = uni.getStorageSync("longitude");//117.082094;;
				// obj.dimension = uni.getStorageSync("latitude");//39.987725;
				obj.detailed_address = this.address;
				obj.image_url = this.imageUrl;
				obj.address = this.addressList[0][this.cityArr[0]].name + this.addressList[1][this.cityArr[1]].name + this.addressList[2][this.cityArr[2]].name;
				this.reqFlag = false;
				this.$u.api.shopAdd(obj).then(res=>{
					// this.$u.api.shopAdd({user_id:obj.user_id,name:obj.name,industry_id:obj.industry_id,province_id:obj.province_id,city_id:obj.city_id,
					// area_id:obj.area_id,business_areas_id:obj.business_areas_id,dimension:obj.dimension,longitude:obj.longitude,detailed_address:obj.detailed_address,
					// image_url:obj.image_url,address:obj.address,}).then(res=>{
					//console.log(res)
					this.$refs.uToast.show({
						title:"添加成功",
						type:"success",
						duration:2000
					})
					setTimeout(()=>{
						this.reqFlag = true;
						uni.$emit('latitude', this.latitude)
						uni.$emit('longitude', this.longitude)
						uni.navigateBack({
							delta:1
						})
					},1500)
				}).catch(err=>{
					this.reqFlag = true;
				})
			},
			getImage(url){
				return app.$vm.globalData.imgBaseUrl + url;
			},
			choiceImg(){
				let _this = this;
				uni.chooseImage({
					count:1,
					sizeType:["compressed"],
					success(result) {
						console.log(result)
						_this.reqFlag = false;
						app.$vm.updataAvator(result.tempFilePaths[0]).then(res=>{
							//console.log(res)
							_this.reqFlag = true;
							_this.imageUrl = res;
						});
					},
					fail:err=>{
						if(err.errMsg!='chooseImage:fail cancel'){
							app.$vm.checkAuth("scope.camera").then(resultConfirm=>{
								if(resultConfirm){
									uni.showModal({
										title:"系统繁忙，请稍后再试"
									})
								}else{
									uni.showModal({
										title:"请检查摄像头和相册权限后重试"
									})
								}
							})
						}
					}
				})
			},
			choiceImg1(){
				let _this = this;
				uni.chooseImage({
					count:9,
					sizeType:["compressed"],
					success(result) {
						console.log(result)
						for(let i=0;i<result.tempFilePaths.length;i++){
							app.$vm.updataAvator(result.tempFilePaths[i]).then(res=>{
								//console.log(res)
								_this.imageUrlArr.push(res);
							});
						}
					},
					fail:err=>{
						if(err.errMsg!='chooseImage:fail cancel'){
							app.$vm.checkAuth("scope.camera").then(resultConfirm=>{
								if(resultConfirm){
									uni.showModal({
										title:"系统繁忙，请稍后再试"
									})
								}else{
									uni.showModal({
										title:"请检查摄像头和相册权限后重试"
									})
								}
							})
						}
					}
				})
			},
			toDistrict(){
				if(!this.cityStr){
					this.$refs.uToast.show({
						title:"请先选择所在省市",
						type:"error",
						duration:2000
					})
					return false;
				}
				uni.navigateTo({
					url:"/pages/pagetwo/pages/district/district?id="+this.addressList[1][this.cityArr[1]].id
				})
			},
			choiceAddress(e){
				console.log(e)
				this.cityArr = e.detail.value;
				this.cityStr = this.addressList[0][e.detail.value[0]].name + this.addressList[1][e.detail.value[1]].name + this.addressList[2][e.detail.value[2]].name;
			},
			changeProvince(e){
				console.log(e)
				if(e.detail.column==0){
					this.getAddress(this.addressList[0][e.detail.value].id,true);
				}else if(e.detail.column==1){
					this.getAddress(this.addressList[1][e.detail.value].id);
				}
			},
			getAddress(id,defaults){
				let obj = {};
				obj.area_parent_id = id;
				this.$u.api.areaList(obj).then(res=>{
					//console.log(res)
					if(id==0){
						this.addressList.splice(0,1,res.data);
						this.getAddress(res.data[0].id,true);
					}else{
						if(defaults){
							this.addressList.splice(1,1,res.data);
							this.getAddress(res.data[0].id);
						}else{
							this.addressList.splice(2,1,res.data);
						}
						
					}
				})
			},
			choiceCate(e){
				this.cateIndex = e.detail.value;
			},
			getCateList(){
				this.$u.api.industryList().then(res=>{
					this.cateList = res.data;
				})
			},
			toStoreAddress(e){
				let _that = this;
				uni.chooseLocation({
					latitude:app.$vm.globalData.latitude,
					longitude:app.$vm.globalData.longitude,
					success(e) {
						_that.address = e.address;
						_that.latitude = e.latitude;
						_that.longitude = e.longitude;
					}
				})
			}
		}
	}
</script>

<style scoped>
	.submitBtn{
		width: 638upx;
		height: 88upx;
		margin: 60upx auto 0;
		border-radius: 44upx;
		line-height: 88upx;
		text-align: center;
		color: white;
		background: #FFAC3F;
		font-size: 28upx;
	}
	
	
	.imgTit{
		margin-top: 32upx;
		font-size: 28upx;
		line-height: 28upx;
		color: #333333;
		margin-bottom: 24upx;
	}
	.imgTip{
		font-size: 20upx;
		line-height: 20upx;
		color: #333333;
		margin-bottom: 20upx;
	}
	.imgWrap{
		width: 112upx;
		height: 112upx;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 8upx;
		box-sizing: border-box;
		border: 2upx dashed #707070;
		margin-right: 20upx;
	}
	.imgWraps{
		width: 112upx;
		height: 112upx;
		border-radius: 8upx;
		box-sizing: border-box;
		/* margin-right: 20upx; */
		background-position: center;
		background-size: cover;
		/* margin-bottom: 20upx; */
	}
	.imgWrapsBox{
		width: 112upx;
		border-radius: 8upx;
		box-sizing: border-box;
		margin-right: 20upx;
		margin-bottom: 20upx;
	}
	.imgWrap>image{
		width: 48upx;
		height: 48upx;
	}
	
	
	.conItemR{
		display: flex;
		align-items: center;
	}
	.conItemR>view{
		font-size: 24upx;
		line-height: 24upx;
		margin-right: 4upx;
	}
	.conItemR>image{
		width: 32upx;
		height: 32upx;
	}
	.conItem{
		width: 100%;
		height: 92upx;
		border-bottom: 2upx solid #EFEFEF;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	.conItemL{
		font-size: 28upx;
		line-height: 28upx;
		color: #333333;
	}
	.conItem>input{
		text-align: right;
		width: calc(100% - 150upx);
		height: 92upx;
		border: none;
		box-sizing: border-box;
		font-size: 24upx;
		color: #333333;
	}
	.conItemTxt{
		display: flex;
		align-items: center;
	}
	.conItemTxt>view{
		font-size: 24upx;
		line-height: 24upx;
		color: #333333;
	}
	.conItemTxt>image{
		width: 32upx;
		height: 32upx;
		margin-left: 4upx;
	}
	.CreateStore{
		background-color: white;
		min-height: 100vh;
		padding: 0 24upx;
	}
</style>
